<extend name="Public/base" />



<block name="style">

	<style>

		.sidebar .right-cnt{

			-webkit-border-radius: 6px;

			-moz-border-radius: 6px;

			border-radius: 6px;

			-webkit-box-shadow: 1px 2px 5px rgba(180,180,180,0.75);

			-moz-box-shadow: 1px 2px 5px rgba(180,180,180,0.75);

			box-shadow: 1px 2px 5px rgba(180,180,180,0.75);

			min-height: 530px;

			display: block;

			border: 1px solid #c9ccd0;

			background-color: #fff;

		}

		.sidebar .right-head{

			overflow: hidden;

			padding: 0 30px;

			height: 50px;

			line-height: 50px;

			text-align: center;

			font-size: 14px;

			border-bottom: 1px solid #c9ccd0;

			background-color: #dee0e6;

			background-image: url(../../image/report/gradient-line.png);

			background-position: top;

			background-repeat: no-repeat;

			-webkit-border-top-right-radius: 5px;

			-moz-border-radius-topright: 5px;

			border-top-right-radius: 5px;

			-webkit-border-top-left-radius: 5px;

			-moz-border-radius-topleft: 5px;

			border-top-left-radius: 5px;

		}

		.sidebar .prev-block{

			width: 100%;

			height: 203px;

			line-height: 203px;

			margin-bottom: 40px;

			text-align: center;

		}

		.sidebar .prev-block .file-prev{

			max-width: 203px;

			max-height: 203px;

			vertical-align: middle;

			background-color: #f0f0f0;

			-webkit-box-shadow: 0 0 2px rgba(120,120,120,0.5);

			-moz-box-shadow: 0 0 2px rgba(120,120,120,0.5);

			box-shadow: 0 0 2px rgba(120,120,120,0.5);

		}

	}

	.sidebar .right-body-block .file-info-item {

		margin-bottom: 8px;

	}

</style>

</block>



<block name="sidebar">

	<div class="right-cnt">

		<!-- ko ifnot: certainFile -->

		<div class="right-head">

			未选择文件

		</div>

		<div class="right-body">

			<div class="right-body-block">

				<div class="prev-block">

					<span>点击左侧文件名以查看信息</span>

				</div>

			</div>

		</div>

		<!-- /ko -->

		<!-- ko with: certainFile --><!-- /ko -->

	</div>

</block>

<block name="body">

	<!-- 标题栏 -->

	<div class="main-title">

		<h2>blackwhite的七牛空间</h2>

	</div>

	<div>

		<form action="__SELF__" method="post">

			<input type="text" class="search-input" name="prefix" placeholder="输入资源名前缀匹配">

			<button class="btn" type="submit">搜索</button>



			<input type="file" name="file" id="upload-file">

			<button class="btn" target-form="ids" id="batchDelBtn" type="button">删 除</button>

			<a href="javascript:location.reload(true);" class="btn">刷新</a>

		</form>

	</div>



	<!-- 数据列表 -->

	<div class="data-table table-striped">

		<form action="{:U('batchDel')}" id="ids">

			<table id="file_list">

				<thead>

					<tr>

						<th></th>

						<th>文件名</th>

						<th>mimeType</th>

						<th >最后更新时间</th>

						<th>文件大小</th>

						<th>操作</th>

					</tr>

				</thead>

				<tbody>

					<volist name="_list" id="vo">

						<tr>

							<td><input type="checkbox" name="key" value="{$vo.key}"></td>

							<td>{$vo.key}</td>

							<td>{$vo.mimeType} </td>

							<td>{$vo.putTime|strval|substr=###,0,11|bcmul="1000000000"|date="Y-m-d H:i:s",###}</td>

							<td>{$vo.fsize|format_bytes}</td>

							<td>

								<a href="javascript:;" data-href="{:U('rename?file='.$vo['key'])}" class="rename" title="{$vo.key}">重命名</a>

								<a href="{:$qiniu->downLink($vo['key'])}" target="_blank">下载</a>

								<a href="{:U('del?file='.$vo['key'])}">删除</a>

								<a href="javascript:adv('{$vo.mimeType}','{$vo.key}')">高级</a>

							</td>

						</tr>

					</volist>

				</tbody>

			</table>

		</form>

	</div>

	<!-- 分页 -->

	<div class="page">

		{$_page}

	</div>

</block>



<block name="script">

	<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>

	<script type="text/javascript" src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>



	<script id="hooktpl" type="text/tpl">

		<form action="" method="post" class="form-horizontal hooktpl" id="rename_form">

			<label class="item-label">请输入文件名：</label>

			<div class="controls">

				<label class="textarea">

					<input type="text" name="new_name" class="input-large" />

				</label>

			</div>

		</form>

	</script>



	<script id="imgAdv" type="text/tpl">

		<p>

			<table>

				<tbody>

					<tr>

						<td>

							<input type="radio" class="type" name="type" value=0 checked>

						</td>

						<td>

							查看基本信息

						</td>

					</tr>

					<tr>

						<td>

							<input type="radio" class="type" name="type" value=1>

						</td>

						<td>

							查看exif

						</td>

					</tr>

					<tr>

						<td>

							<input type="radio" class="type" name="type" value=2>

						</td>

						<td>

							<form action="{:U('Qiniu/dealImage')}" class="form-horizontal hooktpl" id="resize_form" target="_blank" method="post">

								<label class="item-label">缩放类型：</label>

								<div class="controls">

									<label class="radio">

										<input type="radio" name="mode" value="1">

										非等比缩放

									</label>

									<label class="radio">

										<input type="radio" name="mode" value="2" checked>

										等比缩放

									</label>

								</div>

								<div class="controls">

									<label class="text">

										宽度

										<input type="text" name="w">

									</label>

									<label class="text">

										高度

										<input type="text" name="h">

									</label>

								</div>

								<div class="controls">

									<label class="text">

										质量

										<input type="text" name="q" value="100">(1~100)

									</label>

									<label class="select">

										输出格式：

										<select	name="format">

											<option>jpg</option>

											<option>gif</option>

											<option>png</option>

											<option>webp</option>

										</select>

									</label>

									<input type="hidden" name="imageView" value=1>

									<input type="hidden" name="key">

								</div>

							</form>

						</td>

					</tr>

				</tbody>

			</table>

		</p>

	</script>



	<script id="videoAdv" type="text/tpl">

		<form action="" method="post" class="form-horizontal hooktpl" id="rename_form">

			<label class="item-label">请输入文件名：</label>

			<div class="controls">

				<label class="textarea">

					<input type="text" name="new_name" class="input-large" />

				</label>

			</div>

		</form>

	</script>



	<script id="mdAdv" type="text/tpl">

		<form action="{:U('Qiniu/dealDoc')}" class="form-horizontal hooktpl" id="translate_form" target="_blank" method="post">

			<label class="item-label">请输入远程css路径：</label>

			<div class="controls">

				<label class="textarea">

					<input type="text" name="cssurl" class="input-large" />

				</label>

			</div>

			<label class="item-label">请选择模式：</label>

			<div class="controls">

				<label class="radio">

					<input type="radio" name="mode" value=0 checked/>

					完整的 HTML(head+body) 输出

				</label>

				<label class="radio">

					<input type="radio" name="mode" value=1 />

					只转为HTML Body

				</label>

			</div>

			<input type="hidden" name="key">

		</form>

	</script>



	<script type="text/javascript">

		(function($){

			//上传文件

			/* 初始化上传插件 */

			$("#upload-file").uploadify({

				"height"          : 30,

				"swf"             : "__STATIC__/uploadify/uploadify.swf",

				"fileObjName"     : "qiniu_file",

				"buttonText"      : "上传文件",

				"uploader"        : "{:U('uploadOne',array('session_id'=>session_id(),'ajax'=>1))}",

				"width"           : 120,

				'removeTimeout'   : 1,

				'onInit'		  : init,

				'multi'			  : false,

				"onUploadSuccess" : uploadSuccess,

				'onFallback' : function() {

		            alert('未检测到兼容版本的Flash.');

		        }

			});

			function init(){

				$('#upload-file, #upload-file-queue').css('display','inline-block');

			}



			/* 文件上传成功回调函数 */

			function uploadSuccess(file, data){

				console.log(data);

				var data = $.parseJSON(data);

				if(data.status){

					updateAlert('上传成功', 'alert-success');

					setTimeout(function(){

						location.reload(true);

					},1500);

				} else {

					console.log(data.data);

					updateAlert('上传失败');

				}

			}



			//文件信息预览

			$('#file_list tr').click(function(event){

				$target = $(event.target);

				$tr = $(this);

				if(!$target.is(':checkbox')){

					$('#file_list :checkbox').removeAttr('checked');

					$tr.find(':checkbox').prop('checked',true);

					$.ajax({

						url : '{:U('detail')}',

						data : { key : $('td:eq(1)', $tr).text()},

						success: function(data){

							if(data.status){

								$('.sidebar .right-cnt').html(data.tpl);

							}else{

								updateAlert('获取文件信息失败');

							}

						}

					})

				}

			});



			//批量删除

			$('#batchDelBtn').click(function(){

				var $checked = $('#file_list input[name="key"]:checked');

				if($checked.length != 0){

					if(confirm('您确认删除吗？')){

						$.ajax({

							url : '{:U('batchDel')}',

							data : { key : $checked.serializeArray()},

							success: function(data){

								if(data.status){

									updateAlert('删除成功','alert-success');

									location.reload(true);

								}else{

									updateAlert('批量删除失败');

								}

							}

						});

					}

				}else{

					updateAlert('请先选择一项');

				}

				return false;

			});



			//重命名





			$('.rename').click(function(){

				var action = $.trim($(this).data('href'));

				var html = $($("#hooktpl").html());

				html.find("input[name=new_name]").val(this.title);

				html.find("input[name=new_name]").parents('form').attr('action', action);

				//ajaxForm 公共函数

		        function ajaxForm(element,callback,dataType){

		            var form = $(element).closest('form');

		            var dataType = dataType || 'json';

		            $.ajax({

		                type: "POST",

		                url: form.attr('action'),

		                data: form.serialize(),

		                async: false,

		                dataType:dataType,

		                success: function(data) {

		                    if($.isFunction(callback)){

		                        callback(data,form);

		                    }

		                }

		            });

		        }



				option = {

					title:'文件名更改',

					actions:['close'],

					drag:true,

					tools:true,

					buttons:{"ok":['保存', 'blue',function(){

						var _this = this;

						ajaxForm(this.find('.input-large'),function(data){

							if (data.status){

								_this.hide();

								updateAlert(data.info,'alert-success');

								setTimeout(function(){

		                        	location.reload(true);

		                        },1000);

				            }else{

				            	updateAlert(data.info);

				            }

						})

					}]}

				}

				$.thinkbox(html,option);

			});



		})(jQuery);

		//高级处理

		function adv(mime, key){

			if($.inArray(mime,['image/jpeg','image/png', 'image/gif']) != -1){

				//图片

				var html = $($("#imgAdv").html());

				var option = {

					title:'图片处理',

					actions:['close'],

					drag:true,

					tools:true,

					buttons:{"ok":['提 交', 'blue',function(){

						var _this = this;

						var type = this.find('[name="type"]:checked').val();

						if(type == 2){

							this.find('[name=key]').val(key);

							this.find('#resize_form').submit();

						}else if(type == 0){

							window.open(Think.U('Admin/Qiniu/dealImage','key='+key+'&imageInfo=1'));

						}else{

							window.open(Think.U('Admin/Qiniu/dealImage','key='+key+'&exif=1'))

						}

						this.hide();

					}]}

				}

			}else if(key.slice(-3) == '.md'){

				//markdown

				var html = $($("#mdAdv").html());

				var option = {

					title:'md2html转换',

					actions:['close'],

					drag:true,

					tools:true,

					buttons:{"ok":['提交', 'blue',function(){

						var _this = this;

						this.find('[name=key]').val(key);

						this.find('#translate_form').submit();

					}]}

				}

			}else{

				//视频

				var html = $($("#videoAdv").html());

				var option = {

					title:'视频处理',

					actions:['close'],

					drag:true,

					tools:true,

					buttons:{"ok":['保存', 'blue',function(){

						var _this = this;

						ajaxForm(this.find('.input-large'),function(data){

							if (data.status){

								_this.hide();

								updateAlert(data.info,'alert-success');

								setTimeout(function(){

		                        	location.reload(true);

		                        },1000);

				            }else{

				            	updateAlert(data.info);

				            }

						})

					}]}

				}

			}

			$.thinkbox(html,option);

		}

	</script>

</block>

